<template>
  <div class="search-suggestion">
    <!-- 我们要使关键字高亮显示不能 item后面加过滤器 需要v-html来高亮处理关键字-->
    <!-- <van-cell v-for="(item, index) in suggestionList" :key="index">
      {{ item }}
    </van-cell> -->

    <van-cell v-for="(item, index) in suggestionList" 
    :key="index"
    icon="search"
    @click="$emit('SUGGESTION_EVENT', item)">
      <!-- 这里用到插槽,自定义处理每条数据 用函数下面处理更强大,不要写 -->
      <div v-html="highlightWord(item)"></div>
    </van-cell>
  </div>
</template>

<script>
// 搜索建议ajax
import { searchSuggestionAjax } from "@/api/search";
// 防抖节流
import { debounce } from "lodash";

export default {
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 搜索建议列表
      suggestionList: []
    };
  },
  created() {},
  methods: {
    // 搜索建议的函数由 侦听器自动间隔500毫秒触发
    async loadSearchSuggestion(p) {
      try {
        // await 后面只能接受一个返回 promise对象的 函数， 普通函数的会包promise的错误
        const { data: res } = await searchSuggestionAjax(p);
        this.suggestionList = res.data.options;
        // console.log(this.suggestionList);
      } catch (err) {
        this.$toast("搜索建议请求失败");
      }
    },
    // 关键字高亮处理 param是传过来的搜索建议列表每一项
    highlightWord(param) {
      // 字面量的方式创建的正则表达式 里面不能写变量
      // 只能使用构造函数的形式创建 正则对象 RegExp
      //   var pattern = /this.searchText/ig;
      // 这行代码是 全局不区分大小写 匹配关键字 例如 小米
      var pattern = new RegExp(this.searchText, "ig");
      return param.replace(  // 搜索建议每一项item 把 前面的pattern例小米 替换为红色 小米
        pattern, // 小米
        `<span style="color:red">${this.searchText}</span>`
      );
    }
  },

  watch: {
    // 第一个参数是最新的值， 第二个参数是 旧值
    // 一般只需要写一个参数，表示最新的值即可
    // 查文档 ---- api文件夹下面 定义方法 --- 引入这个方法 --- 使用
    // 用普通的watch结构就 不好往下写了
    // searchText(newV){}
    searchText: {
      handler: debounce(function(newV) {
        this.loadSearchSuggestion(newV);
      }, 500),
      //   handler(newV) {
      //     this.loadSearchSuggestion(newV)
      //   }, 第一次都请求
      immediate: true
    }
  }
};
</script>

<style lang="less" scoped></style>
